<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>大小的变化</title>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		#main{
			width: 100px;height: 100px;background: red;
		}
	</style>

</head>
<body>
	<div id="main"></div>
<script type="text/javascript">
var oDiv = document.getElementById('main');
var timer;
oDiv.onmouseover = function () {
	clearInterval(timer);
	timer = setInterval(function () {
		oDiv.style.width = oDiv.offsetWidth+5+'px';
		document.title = oDiv.offsetWidth;
		if (oDiv.offsetWidth>=500) {
			clearInterval(timer);
		}
	},50);
}

oDiv.onmouseout = function () {
	
	clearInterval(timer);
	timer = setInterval(function () {
		oDiv.style.width = oDiv.offsetWidth-5+'px';
		document.title = oDiv.offsetWidth;
		if (oDiv.offsetWidth<=100) {
			clearInterval(timer);
		}
	},50);
}


</script>
</body>
</html>